<template>
    <div id="index">
        <div class="statistics_list">
            <button class="statistics hand op sc" @click="a('/product/index')">
                <div class="left">
                    <div class="number">{{ $t('商品管理') }}</div>
                </div>
                <div class="icon" style="background:#2058c1;"><i class="el-icon-s-shop"></i></div>
            </button>

            <button class="statistics hand op sc" @click="a('/product/type')">
                <div class="left">
                    <div class="number">{{ $t('分类管理') }}</div>
                </div>
                <div class="icon" style="background:#e00043;"><i class="el-icon-s-shop"></i></div>
            </button>

            <button class="statistics hand op sc" @click="a('/product/inOut')">
                <div class="left">
                    <div class="number">{{ $t('库存管理') }}</div>
                </div>
                <div class="icon" style="background:#9920c1;"><i class="el-icon-s-shop"></i></div>
            </button>

            <button class="statistics hand op sc" @click="a('/product/inOut')">
                <div class="left">
                    <div class="number">{{ $t('订单管理') }}</div>
                </div>
                <div class="icon" style="background:#c15820;"><i class="el-icon-s-shop"></i></div>
            </button>

            <button class="statistics hand op sc" @click="a('/account/index')">
                <div class="left">
                    <div class="number">{{ $t('账号管理') }}</div>
                </div>
                <div class="icon" style="background:#009688"><i class="el-icon-s-custom"></i></div>
            </button>

            <button class="statistics hand op sc" @click="a('/monitor/index')">
                <div class="left">

                    <div class="number">{{ $t('监视') }}</div>
                </div>
                <div class="icon" style="background:#e1e700"><i class="el-icon-film"></i></div>
            </button>


            <button class="statistics hand op sc"  @click="a('/sell/index')">
                <div class="left">
                    <div class="number">{{ $t('收银') }}</div>
                </div>
                <div class="icon" style="background:#ff6b7a;"><i class="el-icon-sold-out"></i></div>
            </button>

            <button class="statistics hand op sc" @click="a('/buy/index')">
                <div class="left">
                    <div class="number">{{ $t('出银') }}</div>
                </div>
                <div class="icon" style="background:#48c120;"><i class="el-icon-sell"></i></div>
            </button>

            <button class="statistics hand op sc" @click="a('/statistics/index')">
                <div class="left">
                    <div class="number">{{ $t('统计') }}</div>
                </div>
                <div class="icon" style="background:#FF851B;"><i class="el-icon-data-line"></i></div>
            </button>

            <button class="statistics hand op sc" @click="a('/sets/index')">
                <div class="left">
                    <div class="number">{{ $t('设置') }}</div>
                </div>
                <div class="icon" style="background:#AAAAAA;"><i class="el-icon-setting"></i></div>
            </button>

            <button class="statistics hand op sc" @click="a('/sets/index')">
                <div class="left">
                    <div class="number">{{ $t('数据管理') }}</div>
                </div>
                <div class="icon" style="background:#00aeee;"><i class="el-icon-setting"></i></div>
            </button>

            <button class="statistics hand op sc" @click="loginOut">
                <div class="left">
                    <div class="number">{{ $t('退出登录') }}</div>
                </div>
                <div class="icon" style="background:#000000;"><i class="el-icon-switch-button"></i></div>
            </button>
        </div>
    </div>
</template>

<script>
export default {
    name: "index",
    methods:{
        loginOut(){
            localStorage.useId = "";
            this.a("/login");
        }
    }
}
</script>

<style scoped lang="scss">

    #index{
        background:#f3f3f3; height: 100%;
    }
    .statistics_list {
        width: 100%;
        display: flex;flex-wrap: wrap;
        box-sizing: border-box;
        padding: 20px;
        gap: 20px;
        .statistics {
            width: calc( 25% - 15px );
            background: #FFFFFF;
            padding: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            .left {
                float: left;
                height: 60px;
                .number {
                    height: 60px; line-height: 60px;
                    text-align: center; font-size: 32px;
                    color: #676767; overflow: hidden;
                }
                .title {
                    display: none;
                    font-size: 14px;
                    color: #AAB5BC;
                    font-weight: 600;
                    height: 20px;
                    line-height: 20px;
                    overflow: hidden;
                    text-align: center;
                }
            }
            .icon {
                float: right;
                width: 60px;
                height: 60px;
                background: #666;
                color: #FFFFFF;
                line-height: 60px;
                font-size: 40px;
                text-align: center;
                i{
                    font-size:40px;
                    line-height: 60px;
                }
            }

        }

    }


</style>
